<template>
  <section>
    <el-row>
      <draggable :list="list" v-bind="$attrs">
        <el-col v-for="(item,i) in list" :span="6">
          <section class="v-text-item">
            <el-tag
              :key="i"
              closable
              :disable-transitions="false"
              @click="setText(i,item)"
              @close="delImg4Text(i)"
            >
              {{ item.name }}
            </el-tag>
          </section>
        </el-col>
      </draggable>
      <el-col :span="6">
        <section class="add-img" @click="addText"><i class="el-icon-plus" /></section>
      </el-col>
    </el-row>

    <!--设置导航内容-->
    <el-dialog
      v-if="linkFlag"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="visible"
      title="添加"
      center
      :before-close="() =>{visible = false}"
    >
      <el-form ref="form" :model="form" label-width="100px" style="max-height: 500px;overflow-y: auto" :rules="rules">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="跳转链接" prop="link">
          <el-link type="primary" @click="handleLink">
            {{ form.link && form.link.name ? form.link.name : '选择链接' }}
          </el-link>
          <span v-if="form.link && form.link.name" @click="delLink">
            <i style="vertical-align:middle;" class="el-icon-delete" />
          </span>
        </el-form-item>
        <el-form-item label="自定义ID" prop="customId">
          <el-radio-group v-model="form.customId">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.customId ===1" label="分类ID" prop="id">
          <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item v-for="(item,i) in fields" :key="i" :label="item.name">
          <el-input v-model="form[item.param]" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="visible = false">关 闭</el-button>
        <el-button type="primary" style="padding: 8px 30px;" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import draggable from 'vuedraggable'
import { randomStringForId } from '@/utils/index'

export default {
  name: 'VTextData',
  components: { draggable },
  inject: ['focusId', 'pageVar', 'focusName', 'getListItemInfo'],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showPic: false,
      list: [],
      index: -1,
      visible: false,
      form: {
        id: '',
        customId: 0,
        name: '',
        link: '',
        show: true
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      },
      result: '',
      fileViewId: '',
      linkFlag: true,
      fields: []
    }
  },
  created() {
    if (this.option.value !== '') {
      try {
        this.list = this.option.value || []
      } catch (e) {
      }
    }
    if (this.option.field !== undefined) {
      this.setForm()
    }
  },
  methods: {
    delLink() {
      const obj = Object.assign({}, this.form)
      obj.link = ''
      this.$set(this, 'form', obj)
    },
    getValue() {
      const obj = {
        [this.option.portName]: {
          code: '200'
        }
      }
      obj[this.option.portName]['data'] = this.list
      return obj
    },
    setValue(k) {
    },
    setForm() {
      const fields = this.option.field
      this.fields = fields
      fields.forEach(i => {
        if (this.form[i.param] === undefined) {
          this.form[i.param] = ''
        }
      })
      console.log('setForm', this.form)
    },
    getLinkValue() {
      return this.form.link || ''
    },
    async handleLink() {
      this.linkFlag = false
      const { default: DialogLinks } = await import('@/components/CustomPage/pagemaker/links')
      this.$modal.show(DialogLinks, {
        title: '选择链接',
        type: '',
        compVar: this.getListItemInfo(this.focusName())?.componentVariable ? JSON.parse(this.getListItemInfo(this.focusName()).componentVariable) : [],
        pageVar: this.pageVar(),
        fn: this.linkcomit,
        cn: this.closeLink,
        upValue: this.getLinkValue() === '' ? {} : this.getLinkValue()
      }, {
        width: 800,
        height: 'auto',
        clickToClose: false
      })
    },

    closeLink() {
      this.linkFlag = true
      this.$modal.hideAll()
      return true
    },

    linkcomit(type, name, link, params) {
      this.linkFlag = true
      this.form.link = Object.assign({}, { type, name, link, params })
    },
    delImg4Text(i) {
      this.list.splice(i, 1)
    },
    addText() {
      this.index = -1
      this.linkFlag = true
      this.visible = true
      this.form = {
        id: '',
        customId: 0,
        name: '',
        link: '',
        show: true
      }
    },
    setText(i, item) {
      this.index = i
      this.form = Object.assign({}, item)
      this.visible = true
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.form?.id) {
            this.form['id'] = randomStringForId(10)
          }
          if (this.index === -1) {
            this.list.push(this.form)
          } else {
            this.list[this.index] = this.form
          }

          this.visible = false
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/var.scss';

.v-text-item {
  background: #fff;
  height: 80px;
  margin: 10px;
  position: relative;
  display: flex;
  align-items: center;

  .el-image {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .del-img {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    right: 0;

    > img {
      height: 100%;
      width: 100%;
    }
  }
}

.add-img {
  background: #FAFAFA;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

//.my-slot{
//  display: block !important;
//  padding-left:50px ;
//  text-align: left !important;
//}
.form-uploader {
  position: relative;

  .my-slot {
    display: block !important;
    padding-left: 50px;
    text-align: left !important;
  }

  .el-icon-delete {
    //position: absolute;
    //right: -20px;
    //top: 4px;
    float: right;

    &:hover {
      color: $mainColor;
      transform: scale(1.5);
    }
  }

  .el-image {
    width: 100px;
    height: auto;
  }
}
</style>
